<template>
  <div class="base-info">
    <div class="left">
      <leftList :list="list" @handle-item="handleItem" />
    </div>
    <div class="right">
      <variableConfigInfo v-if="listValue == 'variableConfig'" />
      <cacheConfigInfo v-if="listValue == 'cacheConfig'" />
    </div>
  </div>
</template>
<script setup lang="ts">
import leftList from './components/leftList.vue';
import variableConfigInfo from './components/variableConfigInfo.vue';
import cacheConfigInfo from './components/cacheConfigInfo.vue';
const list = [
  {
    icon: 'listicon',
    title: '变量配置',
    value: 'variableConfig',
  },
  {
    icon: 'listicon',
    title: '缓存配置',
    value: 'cacheConfig',
  },
];

const listValue = ref('variableConfig');
const handleItem = (item: any) => {
  listValue.value = item.value;
};
</script>

<style scoped lang="less">
.base-info {
  display: flex;
  height: 100%;
  position: relative;
  width: calc(100% + 20px);

  .left {
    width: 240px;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 100%;
    padding: 20px 20px 20px 18px;
    overflow: auto;

    .tips-box {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      position: absolute;
      top: -54px;
      height: 64px;
      left: 50%;
      background: #eef7ff;
      border-radius: 4px;
      width: 401px;
      transform: translate(-50%, 0);
      padding: 0 26px;

      .tips-icon {
        margin-right: 18px;
        border-radius: 50%;
        padding: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2590ff;
      }

      .tips-text {
        color: #2590ff;
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
</style>
